<template>
  <main class="zui-p-20px zui-background-color-white">
    <van-row gutter="20" class="zui-text-center">
      <van-col span="8" v-for="(item, index) in sorts" :key="index">
        <lazy-component>
          <div @click="handleLink(item.sortId)">
            <z-image :src="item.src" size="calc((100vw - 80px) / 3)" border-radius="2px"></z-image>
            <div class="zui-ellip-1 zui-color-text-primary zui-font-size-base zui-mt-5px zui-mb-10px">{{ item.name }}</div>
          </div>
        </lazy-component>
      </van-col>
    </van-row>
  </main>
</template>

<script>
export default {
  data () {
    return {
      sorts: []
    }
  },
  methods: {
    getSorts () {
      let i = 30
      let tmp = []
      while (i > 0) {
        tmp.push({
          src: this.$utils.randomEnum(this.$store.state.image),
          name: '分类' + i,
          sortId: i
        })
        i--
      }
      this.sorts = tmp
    },
    handleLink (sortId) {
      console.log('跳转链接')
      this.$router.push({
        path: '/classify',
        query: {
          sortId: sortId
        }
      })
    }
  },
  created () {
    this.getSorts()
  }
}
</script>
